<template>
  <ex-dialog width="1000px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="排班日期：" prop="" class="dateClass">
          <el-date-picker v-model="queryParams.date" format="yyyy-MM" value-format="yyyy-MM" type="month"
            placeholder="请选择"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <el-table v-loading="loading" ref="multipleTable" :data="tabList" stripe border tooltip-effect="dark"
        style="width: 100%">
        <el-table-column label="角色" align="center" prop="name">
          <template slot-scope="scope">
            <dict-tag :options="roleTypeLs" :value="scope.row.roleType" />
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" prop="name"></el-table-column>
        <el-table-column label="计划直播时长" align="center" prop="planHour"></el-table-column>
        <el-table-column label="实际直播时长" align="center" prop="weekName">
          <template slot-scope="scope">
           <div>{{scope.row.liveHour}}小时{{scope.row.liveMinute}}分{{scope.row.liveSecond}}秒</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList"></pagination>
    </div>
    <div class="button_box">
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </div>
  </ex-dialog>
</template>
<script>
// api
import { workforceStatisticsList } from "@/api/customer/scheduleList";
import { parseTime } from '@/utils/index.js'
export default {
  props: {
    visible: Boolean,
  },
  data() {
    return {
      title: "查看排班时长",
      loading: false,
      // 总条数
      total: 0,
      //表格数据
      tabList: [],
      roleTypeLs: [],//角色列表
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        date: '',//排班日期
      },
    };
  },
  created() {
    this.getDict()
    this.getMonthFunc()
    this.getList();
  },
  mounted() {

  },
  methods: {
    //获取状态字典
    getDict() {
      var dictType = "live_user_role_type";
      this.$getSelectList(dictType)
        .then((res) => {
          this.roleTypeLs = res.result[0].dictList;
        })
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      workforceStatisticsList(this.queryParams).then(response => {
        response.result.records.forEach(item => {
          for (var key in item) {
            if (item[key] === '') {
              item[key] = "-";
            }
          }
        });
        this.tabList = response.result.records;
        this.total = response.result.total;
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      });
    },
    // 获取本月
    getMonthFunc() {
      let month = new Date()
      this.queryParams.date = parseTime(month, '{y}-{m}')
    },
    // 表单重置
    reset() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getMonthFunc()
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.reset();
    },
    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },
  }
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;

    .el-select {
      width: 100%;
    }
  }
  ::v-deep{
    .pagination-container{
      padding: 32px 16px 0 16px;
    }
  }
}

.button_box {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
</style>
